<template>
  <div id="dir"></div>
</template>
<script setup>
import { onMounted, inject } from 'vue'
onMounted(() => {
  var docLayer = inject('docLayer')
  const docCatalog = new Zondy.Catalog.MapDoc({
    docName: 'gis_plr',
  })
  /* 获取图层目录树的信息 */
  var childrens = []
  /* http请求 */
  docCatalog.getLayersInfo((data) => {
    data.value.forEach((item) => {
      childrens.push({
        id: item.LayerIndex,
        name: item.Name,
      })
    })
    console.log(childrens)
    childrens.forEach((item) => {
      let tempale = `
                <input type="checkbox" checked id="${item.id}">${item.name}
                `
      $('#dir').append(tempale)
    })
  })

  setTimeout(() => {
    $('#dir input').change(function (evt) {
      var checked = evt.target.checked
      console.log(checked)
      var index = $(this).index()
      docLayer.setLayerStatus(index, checked ? 'include' : 'exclude')
    })
  }, 500)
})
</script>
<style scoped>
#dir {
  position: fixed;
  top: 30px;
  left: 50px;
}
</style>
